<head>
  <title>Most Basic Super-Hands Example</title>
  <script src="https://aframe.io/releases/0.8.2/aframe.js"></script>
  <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.12.4/dist/aframe-extras.min.js"></script>
  <script src="https://unpkg.com/aframe-state-component/dist/aframe-state-component.min.js"></script>
  <script src="../build.js"></script>
  <script>
    AFRAME.registerReducer('clickcount', {
      initialState: {
        count: 0
      },
      handlers: {
        clickCounter: (s) => { s.count++; return s; }
      }
    });
  </script>
</head>

<body>
  <a-scene>
    <a-assets></a-assets>
    <a-entity progressive-controls></a-entity>
    <!-- hover & drag-drop won't have any obvious effect without some additional event handlers or components. See the examples page for more -->
    <a-plane hoverable grabbable stretchable draggable droppable
             color="blue" position="0 1.6 -1" rotation="0 0 0"
             onclick="this.emit('clickCounter')"
             bind__text="value: clickcount.count">
    </a-plane>
  </a-scene>
</body>
